<template>
  <YsRow>
    <div class="photos-title border_style">
      <p class="text_01 title">射线检测结果及评定表</p>
    </div>
    <div class="photos-table border_style">
      <table class="table border_style" style="border-collapse: collapse">
        <tr>
          <td class="text_01 border_style" v-for="(item,index) in templateHeader">{{item.field_name}}</td>
        </tr>
        <tr v-for="(item,index) in templateBody" :key="index">
          <td class="td_wt border_style text_01">{{index+1}}</td>
          <td class="td_wt border_style text_01" v-for="(it,idx) in item.values" :key="idx">
            <!-- {{it.value||'--'}} -->
            {{it.value}}
          </td>
        </tr>
        <tr>
          <td colspan="6" class="border_style text_01" style="text-align: right;"><span style="margin-right: 16px;">底片评级</span></td>
          <td class="td_wt border_style text_01" v-for="(item,i) in tableFieldHeader5" :key="i">
            {{ getdata(item,i)}}
          </td>
        </tr>
      </table>
    </div>
  </YsRow>
</template>
<script>


export default {
  name: 'previewTowTable',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    //获取表头
    templateBean(v) {
      if (v && v.templateFields2) {
        this.templateHeader = v.templateFields2
        this.templateHeader.unshift({
          field_name: "序号",
          key: 999,
        })
      }
      if (v && v.templateFields5) {
        this.tableFieldHeader5 = v.templateFields5

      }
    },
    //获取表格body
    reportDataBean(v) {
      if (v && v.table_field_data2) {
        let tData = v.table_field_data2 || []
        this.templateBody = tData
        
      }
      if (v && v.table_field_data5) {
        let items = v.table_field_data5 || []
        this.tableFieldBody5 = items
      }
    }
  },
  data() {
    return {
      tableFieldHeader5: [],
      tableFieldBody5: [],
      flawBeans: [],
      templateHeader: [],
      templateBody: []
    }
  },
  created() {

  },
  methods: {
    getdata(item, index) {
      let res = this.tableFieldBody5.find(v => { return v.values[0].column_id == item.field_id })
      if (res) {
        return res.values[0].value
      }
      return ""

    }
  }
}
</script>
<style scoped lang='less'>
.photos-title {
  height: 93px;
  width: 100%;
  border: 1px solid #e1e6f0;
  border-top: none;
  border-bottom: none;
  line-height: 93px;
  position: relative;
  p {
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
  }
  span {
    position: absolute;
    right: 16px;
    bottom: 0px;
    height: 30px;
    line-height: 30px;
  }
}

.photos-table {
  width: 100%;
  border: 1px solid #e1e6f0;
  .table {
    width: 100%;
    position: relative;
    right: -1px;
    bottom: -1px;
    tr {
      text-align: center;
      td {
        font-size: 16px;
        height: 60px;
        border-right: 1px solid #e1e6f0;
        border-bottom: 1px solid #e1e6f0;
      }
    }
  }
}
.td_wt {
  // min-width: 200px;
  // max-width: 300px;
  width: 200px;
}
</style>
